<template>
	<view class="food-card">
		<view class="image">
			<!-- <img src="../../static/images/food1.jpg" alt="" /> -->
			<image :src="url" mode="widthFix" class="img"></image>
		</view>
		<view class="info">
			<view class="food-title">{{title}}</view>
			<view class="food-desc">“{{desc}}”</view>
			<view class="info-bottom">
				<view class="price">￥{{price}}</view>
				<view class="sold">已售{{sold}}件</view>
				<navigator url="/pages/foodPreview/foodPreview" class="detail-btn">
					<button class="btn">查看详情</button>
				</navigator>
				<!-- <button class="btn" @click="hanldesss">查看详情</button> -->

			</view>
		</view>
		
	</view>
</template>

<script setup>
	
	
	// import {defineProps} from 'vue'
	
	const props = defineProps({
		item:{
			type:Object,
			default:{}
		}
	})
	const {url,title,desc,price,sold} = props.item
	// console.log(props.item);
	
	// const props = defineProps(['item'])
	// console.log(props);
	
</script>

<style lang="scss" scoped>
.food-card{
	background-color: white;
	padding: 15rpx;
	// margin: 40rpx;
	border-radius: 32rpx;
	box-shadow: #dadada 5rpx 8rpx 20rpx;
	margin: 20rpx 0;

	
	.image{
		  .img{
			  width: 100%;
			  border-radius: 12rpx;
		  }
	}
	
	.info{
		padding: 0 10rpx;
		
		.food-title{
			display: block;
			      font-size: 32rpx;
			      font-weight: 500;
		}
		.food-desc{
			  color: #555;
			      font-size: 28rpx;
			      line-height: 2.4;
		}
		.info-bottom{
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			align-items: center;
			width: 100%;
			
			.price{
				 color: #ff5000;
				        font-size: 36rpx;
				        font-weight: bold;
			}
			.sold{
				color: #999;
				font-size: 28rpx;
			}
			.detail-btn{
				.btn{
					background: #ff5000;
					      color: #fff;
					      border-radius: 32rpx;
					      height: 48rpx;
					      line-height: 48rpx;
					     transition: .1s all;
					      width: 180rpx;
						  font-size: 30rpx;
						  margin: 0;
					      &:active {
					        background: #ff7575;
					      }
				}
			}
		}
	}
}
</style>
